<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form>
                <el-form-item>
                <el-button type="danger" icon="el-icon-add" @click="showCreate" v-if="hasPerm('desk:add')">添加
                </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="5">
                <p style="color: #989A9A;">桌位编号</p>
                <el-input placeholder="输入桌位编号" v-model="searchParam.deskCode" @keyup.enter.native="getList('search')"></el-input>
            </el-col>
            <el-col :span="4">
                <p>&nbsp;</p>
                <el-button type="danger" @click="getList('search')">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row>
            <el-table-column align="center" label="桌位编号" min-width="20%" sortable>
                <template slot-scope="scope">
                    <el-button type="text" @click="deskDetail(scope.$index)" v-if="scope.row.status === 0">{{scope.row.deskCode}}</el-button>
                    <el-button type="text" @click="saleDetail(scope.$index)" v-if="scope.row.status === 1">{{scope.row.deskCode}}</el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" prop="status" :formatter="statusFormatter"></el-table-column>
            <el-table-column align="center" label="人数" prop="maxPeopleNum"></el-table-column>
            <el-table-column align="center" label="管理" min-width="25%" v-if="hasPerm('dishesType:edit')">
                <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-edit" @click="showUpdate(scope.$index)" size="small">修改</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="deskDetailShow" title="开桌">
            <el-form>
                <el-form-item label="人数">
                    <el-input type="number" placeholder="输入用餐人数" v-model="sale.peopleNum"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deskDetailShow=false">取 消</el-button>
                <el-button type="danger" @click="openDesk">开 桌</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="400px">
            <el-form v-if="dialogStatus=='update'" class="small-space" :model="tempDesk" label-position="left" label-width="70px"
                    style='width: 300px; margin-left:50px;'>
                <el-form-item label="桌位编号">
                    <el-input type="text" v-model="tempDesk.deskCode">
                    </el-input>
                </el-form-item>
                <el-form-item label="人 数">
                    <el-input type="number" v-model="tempDesk.maxPeopleNum">
                    </el-input>
                </el-form-item>
            </el-form>
            <el-form v-else class="small-space" :model="tempDesk" label-position="left" label-width="90px"
                    style='width: 300px; margin-left:50px;'>
                <el-form-item label="桌位编号">
                    <el-input type="text" v-model="tempDesk.deskCode">
                    </el-input>
                </el-form-item>
                <el-form-item label="人 数">
                    <el-input type="number" v-model="tempDesk.maxPeopleNum">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCancel">取 消</el-button>
                <el-button v-if="dialogStatus=='create'" type="danger" @click="createDesk">创 建</el-button>
                <el-button type="danger" v-else @click="updateDesk">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchParam: {
                deskCode: '',
            },
            list: [],
            listLoading: false,
            deskDetailShow: false,
            sale: {
                deskId: 0,
                deskCode: '',
                peopleNum: 0
            },
            curDesk: {},
            dialogStatus: 'create',
            dialogFormVisible: false,
            textMap: {
                update: '编辑',
                create: '添加桌位'
            },
            tempDesk: {},
            // deleteDialogShow: false,
        }
    },
    created() {
      this.getList()
    },
    methods: {
        deskDetail(index) {
            this.curDesk = this.list[index]
            this.sale.deskId = this.curDesk.id
            this.sale.deskCode = this.curDesk.deskCode
            this.deskDetailShow = true
        },
        saleDetail(index) {
            this.$router.push({path: `/pos/${this.list[index].id}`})
        },
        async openDesk() {
            if (this.sale.peopleNum <= 0) {
                this.$message.error('请输入正确的就餐人数')
                return
            }
            if (this.sale.peopleNum > this.curDesk.maxPeopleNum) {
                this.$message.error('该桌位最多可容纳' + this.curDesk.maxPeopleNum + '人就餐')
                return
            }
            const res = await this.$api.pos.newSale(this.sale)
            const id = this.curDesk.id
            this.$router.push({path: `/pos/${id}`})
        },
        statusFormatter(row, column) {
            switch(row.status) {
                case 0: return '空'
                case 1: return '未买单'
            }
        },
        getIndex($index) {
            return (this.pageInfo.pageNum - 1) * this.pageInfo.pageSize + $index + 1
        },
        dialogCancel() {
            this.dialogFormVisible = false
            this.tempDesk = {}
        },
        showCreate() {
            this.tempDesk = {}
            this.dialogStatus = "create"
            this.dialogFormVisible = true
        },
        showUpdate($index) {
            this.tempDesk = JSON.parse(JSON.stringify(this.list[$index]))
            this.dialogStatus = "update"
            this.dialogFormVisible = true
        },
        handleDelete($index) {
            let _vue = this;
            this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确认',
                    showCancelButton: false,
                    type: 'warning'
            }).then(async () => {
                let dishes = _vue.list[$index]
                _vue.$api.desk.delete(dishes.id)
                _vue.$message.success('删除成功')
                _vue.getList()
            })
        },
        async getList(search) {
            if (!this.hasPerm('desk:list')) {
                return
            }
            this.listLoading = true
            const res = await this.$api.desk.list()
            this.list = res.data
            this.listLoading = false
        },
        async createDesk() {
            await this.$api.desk.add(this.tempDesk)
            this.getList()
            this.dialogFormVisible = false
        },
        async updateDesk() {
            await this.$api.desk.edit(this.tempDesk)
            this.getList()
            this.dialogFormVisible = false
        }
    }
}
</script>

<style>

</style>
